import { Carousel, Flex } from 'antd';
import "./index.scss";
import React, { useRef } from 'react';

type Tab = {
    key: string | number;
    title: string | React.ReactNode;
    content: string | React.ReactNode;
}

interface CustomerTabsProps {
    tabWidth?: string | number;
    tabsList: Tab[];
    activeKey?: string | number;
    animation?: boolean;
    defaultActiveKey?: string | number;
    onChangeTab?: (tab: any) => void;
}

const CustomerTabs: React.FC<CustomerTabsProps> = ({
    defaultActiveKey,
    activeKey,
    tabWidth,
    tabsList,
    animation = false,
    onChangeTab
}) => {
    const width = typeof tabWidth == 'number' ? tabWidth : parseInt(tabWidth as string);
    const keys = activeKey ? activeKey : defaultActiveKey;
    const carouselRef = useRef<any>(null);

    const handleButtonClick = (index: any) => {
        if (animation && carouselRef.current) {
            carouselRef.current.goTo(index);
        }
    };

    return (
        <div className="tabs">
            <Flex align='center'>
                {
                    tabsList.map((tab, index) => {
                        return (
                            <Flex
                                key={index}
                                justify='center'
                                className={`${keys == tab.key ? 'tabs_nav_active' : ''} tabs_nav`}
                                style={{ width: tabWidth || "100px" }}
                                onClick={() => { onChangeTab && onChangeTab(tab.key), handleButtonClick(index) }}
                            >
                                {tab.title}
                            </Flex>
                        )
                    })
                }
            </Flex>
            <div className='tabs_content' style={{ width: width * tabsList.length }}>
                {
                    !animation && tabsList.filter(tab => tab.key == keys).map((tab, index) => {
                        return <div key={index}>
                            {tab.content}
                        </div>
                    })
                }
                {
                    animation &&
                    <Carousel ref={carouselRef} infinite dots={false}>
                        {
                            tabsList.map(tab => (
                                <div key={tab.key}>{tab.content}</div>
                            ))
                        }
                    </Carousel>
                }
            </div>
        </div>
    )
}

export default CustomerTabs;
